<template>
	<view>
		<view class="cu-bar bg-white search fixed">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="搜索商品" confirm-type="search" @confirm="search" maxlength="10"></input>
			</view>
		</view>
		<swiper v-if="banners.length>0" class="screen-swiper" :class="'round-dot'" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in banners" :key="index">
				<image :src="item.url" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<view class="notification" v-if="notifies.length>0">
			<text class="fl lg text-gray cuIcon-notification"></text>
			<swiper vertical="true" class="fl" style="height:50rpx;width:80%;" :circular="true" :autoplay="true" interval="3000" duration="500">
				<swiper-item v-for="(item,index) in notifies" :key="index">
					<navigator :url="'/pages/message/notice?notifyId='+item.id">
						<text class="main-color">{{index+1}}.{{item.title}}</text>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<view></view>
		<view class="text-lg padding" v-if="hots.length>0">
		    <text class="main-color text-bold cuIcon-time">
				<text class="margin-left-10">限时秒杀</text>
			</text>
			<navigator url="/pages/product/seckill_list" class="fr text-df">
				<text class="text-gray" decode="true">更多&nbsp;>></text>
			</navigator>
		</view>
		<scroll-view class="scroll-view_H" scroll-x="true" v-if="seckills.length>0">
			<view class="text-center scroll-view-item_H" v-for="(item,index) in seckills" :key="index" @click="toSecKillDetail(item)">
				<image style="width:130px;height:130px;" mode="aspectFill" :src="item.url+'_130_130'"></image>
				<view class="text-cut">{{item.productName}}</view>
				<view class="main-color">￥{{item.price}}</view>
			</view>
		</scroll-view>
		<view class="text-lg padding" v-if="hots.length>0">
		    <text class="main-color text-bold cuIcon-hot">
				<text class="margin-left-10">热卖</text>
			</text>
		</view>
		<scroll-view class="scroll-view_H" scroll-x="true" v-if="hots.length>0">
			<view class="text-center scroll-view-item_H" v-for="(item,index) in hots" :key="index" @click="toDetail(item.id)">
				<image mode="aspectFill" :src="item.url+'_100_100'"></image>
				<view class="text-cut">{{item.name}}</view>
				<view class="main-color">￥{{item.price}}</view>
			</view>
		</scroll-view>
		<view class="split-line margin-top-20"></view>
		<view class="cu-list menu-avatar">
		    <view class="cu-item" v-for="(item,index) in products" :key="index">
				<view class="cu-avatar radius" :style="'background-image:url('+item.url+'_250_250);'" @click="toDetail(item.id)"></view>
				<view class="tag1" v-if="item.tag==1"><text>热卖</text></view>
				<view class="tag2" v-else-if="item.tag===2"><text>新品</text></view>
				<view class="tag3" v-else-if="item.tag==3"><text>精品</text></view>
				<view class="tag4" v-else-if="item.tag==4"><text>推荐</text></view>
		        <view class="content">
		            <view class="title" @click="toDetail(item.id)">
						<text class="text-lg">{{item.name}}</text>
		            </view>
					<view class="margin-top-10 oh">
						<view class="fl cu-tag line-green radius">
							已售{{item.sales}}件
						</view>
						<view class="actions">
							<text class="fr margin-right text-grey">剩余 {{item.totalStock}}件</text>
						</view>
					</view>
		            <view class="bg-white price">
					   <view class="text-red text-xl fl margin-right">
						   ￥{{item.price}}
					   </view>						
					   <view class="text-gray text-sm fl line-through">
						   ￥{{item.originalPrice}}
					   </view>
		            </view>
		        </view>
				<view class="icon" @click="toDetail(item.id)">
					<text class="lg cuIcon-roundaddfill"></text>
				</view>
			</view>
		</view>
		<dixian :show="!hasMore"/>
		<kefu/>
	</view>
</template>

<script>
	import { NotifyService } from '@/api/MessageService.js'
	import {AdvertService} from "@/api/PromotionService.js"
	import {ProductService} from "@/api/ProductService.js"
	import dixian from "@/components/dixian/dixian.vue"
	import kefu from "@/components/kefu/kefu.vue"
	import {Util} from '@/utils/util.js'
	
	export default {
		components:{dixian,kefu},
		data() {
			return {
				currentPage:1,hasMore:true,notifies:[],banners: [],hots: [],products:[],seckills:[]
			}
		},
		onPullDownRefresh() {
			this.init();
			this.loadBanner();
			this.loadHotProduct();
			this.loadSeckill();
			this.listProduct();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.currentPage++;
			this.listProduct();
		},
		onLoad() {
			uni.showShareMenu({});
			this.init();
			this.loadNotify();
			this.loadBanner();
			this.loadHotProduct();
			this.loadSeckill();
			this.listProduct();
		},
		onShow() {
			const appName=Util.getCache("appName");
			if(appName){
				uni.setNavigationBarTitle({
					title:appName
				});
			}
		},
		onShareAppMessage: function() {
			uni.showShareMenu({
			  withShareTicket: true,
			  menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onShareTimeline: function (res) {
			const appName=Util.getCache("appName");
		    return {
		      title: appName
		    }
		 },
		methods: {
			init(){
				this.hasMore=true;this.currentPage=1;
				this.products=[];this.hots=[];
			},
			search(event){
				const name=event.detail.value;
				uni.navigateTo({
					url:"/pages/product/search?name="+name
				});
			},
			toDetail(productId){
				uni.navigateTo({
					url:"/pages/product/detail?productId="+productId
				});
			},
			toSecKillDetail(item){
				uni.navigateTo({
					url:"/pages/product/seckill_detail?secKillId="+item.id+"&productId="+item.productId
				});
			},
			loadNotify(){
				NotifyService.listNotify().then((res)=>{
					this.notifies=res;
				});	
			},
			loadBanner(){
				AdvertService.listAdvert(1).then((res)=>{
					this.banners=res;
				});
			},
			loadHotProduct(){
				ProductService.listHots().then((res)=>{
					this.hots=res.data;
				});
			},
			loadSeckill(){
				ProductService.listRecommendSeckill().then(res=>{
					this.seckills=res.data;
				});
			},
			listProduct(){
				if(this.hasMore){
					const param={pageNo:this.currentPage,pageSize:10};
					ProductService.list(param).then((res)=>{
						this.hasMore=res.data.length>0;
						this.products=this.products.concat(res.data);
					});
				}
			}
		}
	}
</script>

<style lang="scss">
.screen-swiper{
	margin-top:100rpx;
}
.scroll-view_H{
	white-space: nowrap;
	width: 100%;
	.scroll-view-item_H{
		display: inline-block;
		text-align: center;
		margin: 0 10rpx;
		image{
			width: 100px; height: 100px; background-color: #eeeeee;
		}
		.text-cut{
			width:100px;
		}
	}
}
.notification{
	margin: 20rpx 0rpx 0rpx 20rpx;
	line-height: 16px;
	height: 30rpx;
	text{
		margin-left: 10rpx;
	}
}
.cu-list{
	.cu-item{
		height:250rpx !important;
		margin-bottom: 30rpx;
		margin-top:20rpx !important;
		.cu-avatar{width: 250rpx;height: 250rpx;}
		.tag1{position: absolute;left: 30rpx;top: 0;background: #bd4cbf;padding: 10rpx 25rpx;color: #ffffff;}
		.tag2{position: absolute;left: 30rpx;top: 0;background: #39b54a;padding: 10rpx 25rpx;color: #ffffff;}
		.tag3{position: absolute;left: 30rpx;top: 0;background: #ff6a00;padding: 10rpx 25rpx;color: #ffffff;}
		.tag4{position: absolute;left: 30rpx;top: 0;background: #ed4217;padding: 10rpx 25rpx;color: #ffffff;}
		.content{
			position: relative !important;
			left: 0rpx !important;
			height: 100%;
			.price{
				clear:both;
				margin-top:20rpx;
				position: absolute;
				bottom: 0px;
				.line-through{
					text-decoration: line-through;
				}
			}
		}
		.icon{
			position: absolute;
			right: .5em;
			color: #ff6a00 !important;
			font-size: 2.5em;
			bottom: -5%;
		}
		&:after {
			border-bottom: 0rpx !important;
		}
	}
}
</style>
